<template>
	<view>
		<view class="fix-top-box">
			<u-tabs :list="tabList" @click="click" lineColor="#06B7F3" :activeStyle="{'color':'#06B7F3'}"
				lineWidth="50">
			</u-tabs>
		</view>
		<view style="height: 44px;"></view>

		<cust-empty desc="暂无数据" v-if="loadStatus=='none'">
		</cust-empty>

		<u-checkbox-group v-model="selection" activeColor="#06B7F3" placement="column">
			<view class="p30">
				<view class="card-shadow-box p20 flex-row mb30 flex-between" v-for="item in list"
					@longpress="showSelect" :key="item.id">
					<!-- 消息查阅状态: 1.未读, 2.已读 -->
					<view v-if="item.readStatus!=2" class="flex-row flex1" @click="showContentFun(item)">
						<view>
							<view class="mr20 bold circle2 c-white f20"
								:style="'background-color:'+(item.type == 1?'#06B7F3':'#FEBB41')">
								{{messageType[item.messageType].key}}
							</view>
						</view>
						<view class="flex1">
							<view class="flex-between">
								<view class="flex-align-center">
									<view class="circle mr10" style="background-color:#EC1010;">
									</view>
									<text class="bold">{{messageType[item.messageType].label}}</text>
								</view>
								<text class="c-desc f20">{{item.createTime}}</text>
							</view>
							<view class="c-desc mt20">
								{{item.content}}
							</view>
						</view>
					</view>
					<view v-else class="flex-row c-info flex1" @click="showContentFun(item)">
						<view>
							<view class="mr20 bold circle2 c-white f20" style="background-color: #999999;">
								{{messageType[item.messageType].key}}
							</view>
						</view>
						<view class="flex1">
							<view class="flex-between">
								<view class="flex-align-center">
									<text class="bold">{{messageType[item.messageType].label}}</text>
								</view>
								<text class="c-info f20">{{item.createTime}}</text>
							</view>
							<view class="c-info mt20">
								{{item.content}}
							</view>
						</view>
					</view>

					<view class="flex-between-center pl30">
						<u-checkbox v-if="selectMode" :name="item.id" shape="circle" label="选中"></u-checkbox>
					</view>
				</view>

			</view>
		</u-checkbox-group>
		<view class="nomore" v-if="loadStatus != 'none'">
			<u-loadmore :status="loadStatus" />
		</view>
		<u-modal :show="delConfirmDia" :title="delConfirmDiaTitle" :content="delConfirmDiaContent"
			:confirmText="delConfirmDiaYesBtn" :showCancelButton="true" :cancelText="delConfirmDiaNoBtn"
			@confirm="handleDel" @cancel="hideDelConfirmDia"></u-modal>
		<view class="h140"></view>
		<fix-bottom-del v-if="selectMode" @cancel="handleCancel" @del="showDelConfirmDia"></fix-bottom-del>
		<view class="fix-bottom-box" v-if="list.length>0 && !selectMode">
			<view class="flex-between-center del-box">
				<u-button :throttleTime="1000" :iconSize="14" icon="all-read" @click="allRead" iconColor="#fff"
					customPrefix='iconfontbike iconbike' class="btn grey"
					customStyle="background: #0BB3F2;border-color: #0BB3F2;color: #ffffff !important;margin-right:60rpx;">
					一键已读</u-button>
				<u-button :throttleTime="1000" :iconSize="16" icon="trash" iconColor="#fff" @click="allDelete"
					class="btn red" customStyle="background: #EC1010;border-color: #EC1010;color: #ffffff !important;">
					一键删除</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import FixBottomDel from "../components/fix-bottom-del";
	import delConfirm from "@/mixins/delConfirm";
	import custEmpty from "@/components/cust-empty/index.vue";
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"
	import {
		getMessageListAPI,
		readMessageAPI,
		getUnReadCountAPI,
		removeMessageAPI,
		readAllMessageAPI,
		removeAllAPI
	} from "@/api/api/message.js"
	import pages from "@/mixins/pages.js";
	import {
		throttle
	} from '@/utils/utils.js'

	export default {
		components: {
			FixBottomDel,
			custEmpty
		},
		mixins: [delConfirm, pages],
		data() {
			return {
				tabList: [{
					name: '全部消息',
				}, {
					name: '系统消息',
				}, {
					name: '告警消息'
				}],
				selection: [],
				selectMode: false,
				messageType: {
					"1": {
						label: "系统消息",
						key: "系",
					},
					"2": {
						label: "报警消息",
						key: "警",
					}
				}
			}
		},
		onShow() {
			this.funAPI = getMessageListAPI;
			//#ifdef MP-WEIXIN
			let userId = this.$store.state.loginUser.user_id;
			//#endif
			//#ifdef H5
			let userId = getStoreSyncUtil("loginUser").user_id;
			//#endif
			this.params = {
				pushMode: 3,
				userId: userId,
			}
			this.showPropListCallcack = (obj, item) => {
				return {
					id: item.id,
					messageType: item.messageType,
					createTime: item.createTime,
					content: item.content,
				}
			};
			this.initList();
			this.getListFun();
		},
		methods: {
			allRead: throttle(function() {
				this.delConfirmDiaContent = "确定要一键已读吗?";
				this.delConfirmDiaYesBtn = "一键已读";
				this.delConfirmDiaNoBtn = "取消"
				this.delConfirmDia = true;

			}),
			allDelete: throttle(function() {
				this.delConfirmDiaContent = "确定要一键删除吗?";
				this.delConfirmDiaYesBtn = "一键删除";
				this.delConfirmDiaNoBtn = "取消";
				this.delConfirmDia = true;

			}),
			click: throttle(function(item) {
				let messageType = item.index != 0 ? item.index : null;
				this.params.messageType = messageType;
				this.initList();
				this.getListFun();
			}, 500),
			showContentFun: throttle(function(item) {
				uni.showModal({
					title: this.messageType[item.messageType].label,
					content: item.content,
					showCancel: false,
				});
				if (item.readStatus != 2) {
					readMessageAPI({
						ids: item.id
					}).then(([err, data]) => {
						item.readStatus = 2;
						getUnReadCountAPI(getStoreSyncUtil('loginUser').user_id).then(([err, data]) => {
							if (err) return;
							this.$store.commit("setUnReadNum", data.unReadNum)
						});
					});

				}
			}),
			showSelect() {
				this.delConfirmDiaContent = "确定删除所选内容吗?";
				this.delConfirmDiaYesBtn = "确定删除";
				this.delConfirmDiaNoBtn = "取消删除";
				this.selectMode = true
			},

			handleCancel() {
				this.selection = []
				this.selectMode = false
			},

			handleDel() {
				this.hideDelConfirmDia()
				if (this.delConfirmDiaContent.indexOf("一键已读") != -1) {
					readAllMessageAPI(!this.params.messageType ? ["1", "2"] : [this.params.messageType + '']).then(([err,
						data
					]) => {
						if (err) return;
						this.$store.commit("setUnReadNum", 0);
						this.initList();
						this.getListFun();
					})
				} else if (this.delConfirmDiaContent.indexOf("一键删除") != -1) {
					removeAllAPI(!this.params.messageType ? ["1", "2"] : [this.params.messageType + '']).then(([err,
						data]) => {
							if (err) return;
							this.$store.commit("setUnReadNum", 0);
							this.initList();
							this.getListFun();
						})
				} else {
					removeMessageAPI(this.selection.join(",")).then(([err, data]) => {
						if (err) return;
						this.initList();
						this.getListFun();
					})
					this.handleCancel()
				}

			}
		},
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	::v-deep .u-checkbox {
		height: 24px;
		width: 55px;
		justify-content: center;
		position: relative;
		transform: translateX(10px);

		&>text {
			transform: scale(2);
			position: absolute;
			left: 10px;
			color: #ffffff00 !important;
			z-index: 3;
		}
	}
</style>
